<!--
*@Author: QWP
*@Description: 区域超员预警
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <u-collapsed-sider class="f-padding-6"
      v-if="!collieryCode">
      <u-tree
        :treeData="resourceServeTree.tree[0].children"
        ref="treeRef"
        :showSearch="false"
        :field-names="{
          title: 'text',
          key: 'id',
          children: 'children',
        }"
        v-model:expandedKeys="treeExpandes"
        @select="
          (keys, { selected: bool, selectedNodes, node, event }) => {
            searchF.model.cityCode = node['code'];
            getSearch(1);
          }
        "
      />
    </u-collapsed-sider>

    <a-layout class="f-h-100 s-bg-white">
      <u-table-header v-if="!collieryCode">
        <u-form
          :model="searchF.model"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto"
          :isSearch="true"
          @formChange="getSearch(1)"
        >
          <a-col>
            <a-space>
              <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            </a-space>
          </a-col>
        </u-form>
      </u-table-header>
      <u-table-content>
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"
          :loading="loading"
          :scroll="{ y: useTableScroll() }"
          @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          @onDblclick="
            record => {
              currentRow = record;
              showDispose = true;
            }
          "
          @change="getSearch"
        ></u-table>
      </u-table-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import {
  Row,
  Button,
  ColProps,
  FormItemProps,
  Space,
  TableColumnProps,
  TypographyTitle,
  Rate,
} from 'ant-design-vue';
import { _IExtra } from '@/src/components/common/form/interface';
import { useTableScroll } from '@/hooks/useTable';
import * as regionalOvercrowdingAPI from '@/service/emergency/regionalOvercrowding';
import * as resourceServeTree from '@/service/resource/tree';

const props = defineProps<{
  collieryCode?: string // 煤矿编码
}>()

const emits = defineEmits(['focusChange']);

const treeExpandes = ref(['fda30684-6473-4fb5-8cdb-0d6001a7dd15']);

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    keywords: null,
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '72px',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '模糊查询',
    key: 'keywords',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: { placeholder: '请输入企业名称' },
  },
];

// 列表
const currentRow = ref({});
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'ROW_ID',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  ...(
    props.collieryCode ? [] : [
      {
        dataIndex: 'collieryName',
        title: '煤矿名称',
        width: 300,
      },
    ]
  ),
  { dataIndex: 'areaName', title: '区域', width: 200 },
  { dataIndex: 'alarmType', title: '报警类型', width: 200 },
  { dataIndex: 'collieryCode', title: '煤矿编码', width: 200 },
  // { dataIndex: 'createtime', title: '创建时间', width: 200 },
  { dataIndex: 'currentPeopleCount', title: '区域总人数 ', width: 150 },
  { dataIndex: 'upperLimitPeople', title: '区域定员数 ', width: 150 },
  { dataIndex: 'overNum', title: '区域超员数 ', width: 150 },
  { dataIndex: 'startAlarmTime', title: '超员开始时间 ', width: 150 },
  { dataIndex: 'endAlarmTime', title: '超员结束时间 ', width: 150 },
  { dataIndex: 'overTime', title: '超员持续时间 ', width: 150 },

  // { dataIndex: 'updatetime', title: '最后修改时间 ', width: 150 },
]);

onMounted(() => {
  getSearch();
});

// 列表查询
const getSearch = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.current = 1;
    }
    searchF.model.collieryCode = props.collieryCode || '';
    if(props.collieryCode) {
      searchF.model.type = 1
    }
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const res = await regionalOvercrowdingAPI.getCompany(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
};

let showDispose = ref<boolean>(false);

watch(() => props.collieryCode, (nval, oval) => {
  if(nval) {
    getSearch()
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
